<!DOCTYPE html>
<html lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
	<meta name="format-detection" content="telephone=no" />
	<meta name="format-detection" content="email=no" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Cache-Control" content="no-cache" />
	<meta http-equiv="Expires" content="0" />
    <title>血糖监测</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="../../../common/css/common.css" />
    <link rel="stylesheet" href="../../../common/css/vant-index.css" />
    <link rel="stylesheet" href="../../css/monitor.css">
    <link rel="stylesheet" href="../../css/bloodprofile1.css">
    <style type="text/css">
    		.van-button--info{
    			background: #F5F5F5 ;
    			color: #595959;
    			border-color: #F5F5F5;
    		}
    		.van-button--warning{
    			color: #FFFFFF;
    		}
    		.van-icon-arrow:before {
		    content: '\e660';
		    font-size: 14px;
		     transform: rotate(0deg);
		}
		.van-pagination__item:not(:last-child)::after {
		    border-right-width: 0;
		}
		.van-hairline--surround::after {
		    border-width: 0px;
		}
		.van-cell__value--alone{
			font-size: 14px;
		}
		.van-button--mini{
			font-size: 12px;
		}
		.van-nav-bar__left{
			padding: 0 5px;
		}
		.van-nav-bar__right {
			padding: 0 10px;
		}
    </style>

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="../../../common/js/vue.min.js"></script>
    
    <script src="../../../common/js/axios.min.js"></script>
    <script src="../../../common/js/vue.global.prod.js"></script>

</head>

<body>
    <div id="app" v-cloak>
		<div class="bs_echart">
			<div class="bp_title flex">
				<div class="bp_title_main">
					<p>血糖曲线</p>
				</div>
				<div class="bp_title_tips">
					<ul>
						<li><span style="background:#BAE7FF;"></span><p>0.0-4.4</p></li>
						<li><span style="background: #D9F7BE;"></span><p>4.4-7.8</p></li>
						<li><span style="background: #FFE7BA;"></span><p>7.8-11.0</p></li>
						<li><span style="background: #FFCCC7;"></span><p>>11.0</p></li>
					</ul>
				</div>
			</div>

            <div class="shadow">
            		<div class="echart_tabs bp_tabs flex">
            			<van-button v-for='item in period' round type="info" size="mini" :key="'period_'+item.key"  :class="['filter-item', (selected.period == item.key) ? 'van-button--warning' : '']" @click="handleGetCharts(item.key)">{{item.value}}</van-button>
				</div>
				<div class="" v-if="showchart==true">
					<line-charts
	                :key="initCharts"
	                :x-axis-data="charts.axisData"
	                :y-axis-unit="charts.axisUnit"
	                :visual-map="charts.visualMap"
	                :legend="charts.legend"
	                :show-legend-arr="charts.showLegend"
	                :series-data="charts.seriesData"
	                :add-line="true"
	                :line-style="charts.lineStyle"
	                :add-area="true"
	                :area-style="charts.areaStyle"
	            ></line-charts>
				</div>
	            	<div v-if='showchart==false' class="none_info">
	            		<img src="../../img/bloodprofile/none.png" />
					<p>— 暂无数据 —</p>
	            	</div>
            </div>
        </div>

    		<!--<div class="bs_statistics">
			<div class="bp_title flex">
				<div class="bp_title_main">
					<p>血糖统计</p>
				</div>
			</div>

            <div class="shadow">
            		<div class="bs_statistics_tabs bp_tabs flex">
            			<van-button v-for='item in period' round type="info" size="mini" :key="'period_'+item.key"  :class="['filter-item', (selected.statisticsPeriod == item.key) ? 'van-button--warning' : '']" @click="handleGetStatistics(item.key)">{{item.value}}</van-button>
				</div>
				<div class="statistics_main">
					<ul>
						<li>
							<p class="statistics_main_title">平均血糖(mmol/l)</p>
							<p class="avg">{{allavgValue}}</p>
						</li>
						<li>
							<p class="statistics_main_title">最高值(mmol/l)</p>
							<p class="highest">{{allhighestValue}}</p>
						</li>
						<li>
							<p class="statistics_main_title">最低值(mmol/l)</p>
							<p class="lowest">{{alllowestValue}}</p>
						</li>
						<li>
							<p class="statistics_main_title">偏高次数</p>
							<p class="highnum">{{allhighCounts}}</p>
						</li>
						<li>
							<p class="statistics_main_title">正常次数</p>
							<p class="normalnum">{{allnormalCounts}}</p>
						</li>
						<li>
							<p class="statistics_main_title">偏低次数</p>
							<p class="lownum">{{alllowCounts}}</p>
						</li>
					</ul>
	            	</div>
            </div>
        </div>
    -->
    		<div class="bs_records">
    			<div class="diet_header">
				<van-cell @click="showPopup" is-link>{{columnsValue}}</van-cell>
				<van-popup v-model:show="show" position="bottom" :style="{ height: '45%' }">
					<van-picker show-toolbar title="时间选择" :columns="columns" :default-index="0" @cancel="show = false" @confirm="onConfirm" />
				</van-popup>
			</div>
			<div class="diet_body">
				<van-list v-if="recordnothing==1" v-model="loading" :finished="finished" finished-text="没有更多了">
					<van-cell center v-for="item in list" :key="item">
						<!--空腹-->
						<div class="item_list" v-if='item.beforeBreakfastRecord'>
							<img id="dietIcon" style="float: left;" src="../../img/bloodprofile/hungry.png" alt="">
							<div class="diet_content">
								<div class="diet_type flex">
									<span>空腹血糖</span>
									<span>{{item.beforeBreakfastRecord.value}}</span>
								</div>
								<span  style="color: rgba(0,0,0,0.65);font-size:13px">{{item.beforeBreakfastRecord.time}}</span>
								<div v-if="item.beforeBreakfastRecord.recordPhoto" class="diet_photo">
									<ul>
		                            		<li :key="index" v-for="item1 in item.beforeBreakfastRecord.recordPhoto">
		                            			<img :src="item1" />
		                            		</li>
		                            	</ul>
								</div>
							</div>
						</div>
						<!--早餐后-->
						<div class="item_list" v-if='item.afterBreakfastRecord'>
							<img id="dietIcon" style="float: left;" src="../../img/bloodprofile/rice.png" alt="">
							<div class="diet_content">
								<div class="diet_type flex">
									<span>早餐后血糖</span>
									<span>{{item.afterBreakfastRecord.value}}</span>
								</div>
								<span  style="color: rgba(0,0,0,0.65);font-size:13px">{{item.afterBreakfastRecord.time}}</span>
								<div v-if="item.afterBreakfastRecord.recordPhoto" class="diet_photo">
									<ul>
		                            		<li :key="index" v-for="item1 in item.afterBreakfastRecord.recordPhoto">
		                            			<img :src="item1" />
		                            		</li>
		                            	</ul>
								</div>
							</div>
						</div>
						<!--午餐前-->
						<div class="item_list" v-if='item.beforeLunchRecord'>
							<img id="dietIcon" style="float: left;" src="../../img/bloodprofile/rice.png" alt="">
							<div class="diet_content">
								<div class="diet_type flex">
									<span>午餐前血糖</span>
									<span>{{item.beforeLunchRecord.value}}</span>
								</div>
								<span  style="color: rgba(0,0,0,0.65);font-size:13px">{{item.beforeLunchRecord.time}}</span>
								<div v-if="item.beforeLunchRecord.recordPhoto" class="diet_photo">
									<ul>
		                            		<li :key="index" v-for="item1 in item.beforeLunchRecord.recordPhoto">
		                            			<img :src="item1" />
		                            		</li>
		                            	</ul>
								</div>
							</div>
						</div>
						<!--午餐后-->
						<div class="item_list" v-if='item.afterLunchRecord'>
							<img id="dietIcon" style="float: left;" src="../../img/bloodprofile/rice.png" alt="">
							<div class="diet_content">
								<div class="diet_type flex">
									<span>午餐后血糖</span>
									<span>{{item.afterLunchRecord.value}}</span>
								</div>
								<span  style="color: rgba(0,0,0,0.65);font-size:13px">{{item.afterLunchRecord.time}}</span>
								<div v-if="item.afterLunchRecord.recordPhoto" class="diet_photo">
									<ul>
		                            		<li :key="index" v-for="item1 in item.afterLunchRecord.recordPhoto">
		                            			<img :src="item1" />
		                            		</li>
		                            	</ul>
								</div>
							</div>
						</div>
						<!--晚餐前-->
						<div class="item_list" v-if='item.beforeDinnerRecord'>
							<img id="dietIcon" style="float: left;" src="../../img/bloodprofile/rice.png" alt="">
							<div class="diet_content">
								<div class="diet_type flex">
									<span>晚餐前血糖</span>
									<span>{{item.beforeDinnerRecord.value}}</span>
								</div>
								<span  style="color: rgba(0,0,0,0.65);font-size:13px">{{item.beforeDinnerRecord.time}}</span>
								<div v-if="item.beforeDinnerRecord.recordPhoto" class="diet_photo">
									<ul>
		                            		<li :key="index" v-for="item1 in item.beforeDinnerRecord.recordPhoto">
		                            			<img :src="item1" />
		                            		</li>
		                            	</ul>
								</div>
							</div>
						</div>
						<!--晚餐后-->
						<div class="item_list" v-if='item.afterDinnerRecord'>
							<img id="dietIcon" style="float: left;" src="../../img/bloodprofile/rice.png" alt="">
							<div class="diet_content">
								<div class="diet_type flex">
									<span>晚餐后血糖</span>
									<span>{{item.afterDinnerRecord.value}}</span>
								</div>
								<span  style="color: rgba(0,0,0,0.65);font-size:13px">{{item.afterDinnerRecord.time}}</span>
								<div v-if="item.afterDinnerRecord.recordPhoto" class="diet_photo">
									<ul>
		                            		<li :key="index" v-for="item1 in item.afterDinnerRecord.recordPhoto">
		                            			<img :src="item1" />
		                            		</li>
		                            	</ul>
								</div>
							</div>
						</div>
						<!--睡前-->
						<div class="item_list" v-if='item.beforeSleepRecord'>
							<img id="dietIcon" style="float: left;" src="../../img/bloodprofile/bed.png" alt="">
							<div class="diet_content">
								<div class="diet_type flex">
									<span>睡前血糖</span>
									<span>{{item.beforeSleepRecord.value}}</span>
								</div>
								<span style="color: rgba(0,0,0,0.65);font-size:13px">{{item.beforeSleepRecord.time}}</span>
								<div v-if="item.beforeSleepRecord.recordPhoto" class="diet_photo">
									<ul>
		                            		<li :key="index" v-for="item1 in item.beforeSleepRecord.recordPhoto">
		                            			<img :src="item1" />
		                            		</li>
		                            	</ul>
								</div>
							</div>
						</div>
						<!--凌晨-->
						<div class="item_list" v-if='item.earlyMorningRecord'>
							<img id="dietIcon" style="float: left;" src="../../img/bloodprofile/noon.png" alt="">
							<div class="diet_content">
								<div class="diet_type flex">
									<span>凌晨血糖</span>
									<span>{{item.earlyMorningRecord.value}}</span>
								</div>
								<span style="color: rgba(0,0,0,0.65);font-size:13px">{{item.earlyMorningRecord.time}}</span>
								<div v-if="item.earlyMorningRecord.recordPhoto" class="diet_photo">
									<ul>
		                            		<li :key="index" v-for="item1 in item.earlyMorningRecord.recordPhoto">
		                            			<img :src="item1" />
		                            		</li>
		                            	</ul>
								</div>
							</div>
						</div>
					</van-cell>
				</van-list>
				<van-list v-if="recordnothing==2">
					<div class="none_info">
						<img src="../../img/bloodprofile/none.png" />
						<p>当前没有打卡记录哦</p>
					</div>
				</van-list>
				<van-pagination v-model="currentPage" @click="pageChange" :page-count="totalPage" mode="simple" />
			</div>

    		</div>

			<div class="bp_title"  v-if="firstSugarImg">
				<br>
				<div class="bp_title_main" @click="() => {show=true}">
					<van-badge :content="sugarImgs.length">
						<p>动态血糖图</p>
					</van-badge>
				</div>
				<br>
				<div style="text-align: center;">
				<img :src="firstSugarImg" alt="" @click="() => {show=true}" style="margin-top: 20px; max-width: 100%; max-height: 120px; text-align: center;">
			<van-image-preview v-model:show="show" :images="sugarImgs">
				<!-- <template v-slot:index>第{{ index }}页</template> -->
			  </van-image-preview>
			</div>
			</div>
    </div>
</body>
<script src="../../../common/js/vant.min.js"></script>
<script src="../../js/echarts.min.js"></script>
<script src="../../../common/js/url.min.js"></script>
<script src="../../../base.js"></script>
<script type="module">
    import {
        getAction,
        postAction,
        getUrl,
        spliceUrlWechat,
        sum,avg,remove
    } from "../../../common/js/api/vue3-axios-utils.js";

    import { lineCharts, uuid } from "../../js/charts-components.js"

    const app = Vue.createApp({

        data() {
            return {
                initCharts: 'init-blood-sugar',
           		charts: {

                    axisData: [],
                    axisUnit: '',
                    legend: ['所有', '空腹', '早餐后', '午餐前', '午餐后', '晚餐前', '晚餐后', '睡前', '凌晨'],
                    showLegend: [],
                    seriesData: [],
                    lineStyle: [
                        {
                            index: 0,
                            lineColor: '#f06980',
                            textColor: '#4d4d4d',
                            data: [4.4, 7.8],
                        },
                    ],
                    areaStyle: [{
                    		index:0,
                        color: '#EEF9FF',
                        data: [0, 4.4],
                    },{
                    		index:1,
                        color: '#F5FDEF',
                        data: [4.4, 7.8],
                    },{
                    		index:2,
                        color: '#FFF9EE',
                        data: [7.8, 11],
                    },{
                    		index:3,
                        color: '#FFF2F1',
                        data: [11,13],
                    },],
                },
                recordDataSource: [],
                statisticsDataSource: [],
                url: {
                    getCharts: "/101/01/1010101",
                    getRecords: "/101/01/1010102",
                    getStatistics: "/101/01/1010103",
                },
                selected: {
					period: 2,
					statisticsPeriod: 2,
					recordPeriod: 2
				},
				paginationShow:true,
				showchart:true,
				show: false,  //弹窗
                period: [{key:2,value:'最近两周'},{key:3,value:'最近一个月'},{key:5,value:'最近三个月'},{key:0,value:'全部'}],
                columns: ['最近两周', '最近一个月', '最近三个月', '全部'],
                columnsValue: '最近两周',
                recordnothing: 1,
                chartDataLoading: true,
                recordDataLoading: true,
                statisticsDataLoading: true,
                count:[],//总次数
				avgValue:[],//平均
				highCounts:[],//最高次数
				lowCounts:[],//低次数
				normalCounts:[],//正常次数
				highestValue:[],//最高值
				lowestValue:[],//最低值
				allcount:'-',//总次数
				allavgValue:'-',//平均
				allhighCounts:'-',//最高次数
				alllowCounts:'-',//低次数
				allnormalCounts:'-',//正常次数
				allhighestValue:'-',//最高值
				alllowestValue:'-',//最低值
				list:[],
				loading : false,
				finished : false,
				currentPage: 1,
                totalPage: 0,
                pageSize:10,
				firstSugarImg: '',
				sugarImgs: []
            }
        },
        components: {
            lineCharts: lineCharts
        },
        methods: {
            async init () {
                await this.handleGetCharts(this.selected.period)
                await this.handleGetRecords(this.selected.recordPeriod)
                await this.handleGetStatistics(this.selected.statisticsPeriod)
            },
            showPopup() {
                this.show = true
            },
            onConfirm(value, index) {
                console.log(value, index);
                this.columnsValue = value
                this.show = false
                if (index == 0) {
                    this.selected.recordPeriod = 2
                    this.selected.period = 2
                }
                if (index == 1) {
                    this.selected.recordPeriod = 3
                    this.selected.period = 3
                }
                if (index == 2) {
                    this.selected.recordPeriod = 5
                    this.selected.period = 5
                }
                if (index == 3) {
                    this.selected.recordPeriod = 0
                    this.selected.period = 0
                }
                this.handleGetCharts(this.selected.period)
                this.handleGetRecords(this.selected.recordPeriod)
            },
            handleGetCharts(period) {
				if(period !== this.selected.period) {
					this.selected.period = period;
					this.selected.recordPeriod = period
					for(var k=0;k<this.period.length;k++){
						if(period==this.period[k].key){
							this.columnsValue = this.period[k].value
						}
					}
					this.handleGetRecords(this.selected.recordPeriod)
				}
                this.chartDataLoading = true;
                this.charts.axisData = []
                this.charts.seriesData = []
                postAction(spliceUrlWechat(this.url.getCharts), { period: period, patientId: this.pid,type:3}).then((res) => {
                    res = res.data
                    if (res.success) {
                    		if(res.result.dates.length>0){
                    			this.showchart = true
                    			console.log("getCharts:", res)
                    			for(var i=0;i<res.result.dates.length;i++){
                    				res.result.dates[i] = res.result.dates[i].substr(5,11)
                    			}
	                        this.charts.axisData = res.result.dates
	                        this.charts.seriesData = res.result.value
	                        // 延迟500毫秒刷新统计图
	                        setTimeout(() => {
	                          this.initCharts = uuid()
	                        }, 500);
	                        console.log('charts', this.charts)
                    		}else{
                    			this.showchart = false
                    		}

                    }
                    if (res.code === 510) {
                        this.$message.warning(res.message)
                    }
                    this.chartDataLoading = false;
                })
            },
            handleGetRecords (period) {
                this.recordDataLoading = true;
                postAction(spliceUrlWechat(this.url.getRecords), { period: period, patientId: this.pid,page:this.currentPage,pageSize:this.pageSize,type:3}).then((res) => {
                    res = res.data
                    if (res.success) {
                        console.log("getRecords:", res)
                        if (res.result.count) {
                        		this.recordnothing = 1
                        		this.paginationShow = true
                        		this.totalPage = res.result.totalPage;
                        		this.list = res.result.recordList
	                        //处理接口返回多张图片
	                        for (let i = 0; i < res.result.recordList.length; i++) {
	                        		if(res.result.recordList[i].beforeBreakfastRecord&&res.result.recordList[i].beforeBreakfastRecord.recordPhoto){
	                        			res.result.recordList[i].beforeBreakfastRecord.recordPhoto =
	                                    res.result.recordList[i].beforeBreakfastRecord.recordPhoto.split(",");
	                        		}
	                        		if (res.result.recordList[i].afterBreakfastRecord&&res.result.recordList[i].afterBreakfastRecord.recordPhoto) {
	                                res.result.recordList[i].afterBreakfastRecord.recordPhoto =
	                                    res.result.recordList[i].afterBreakfastRecord.recordPhoto.split(",");
	                            }
	                            if(res.result.recordList[i].beforeLunchRecord&&res.result.recordList[i].beforeLunchRecord.recordPhoto){
	                        			res.result.recordList[i].beforeLunchRecord.recordPhoto =
	                                    res.result.recordList[i].beforeLunchRecord.recordPhoto.split(",");
	                        		}
	                        		if (res.result.recordList[i].afterLunchRecord&&res.result.recordList[i].afterLunchRecord.recordPhoto) {
	                                res.result.recordList[i].afterLunchRecord.recordPhoto =
	                                    res.result.recordList[i].afterLunchRecord.recordPhoto.split(",");
	                            }
	                            if(res.result.recordList[i].beforeDinnerRecord&&res.result.recordList[i].beforeDinnerRecord.recordPhoto){
	                        			res.result.recordList[i].beforeDinnerRecord.recordPhoto =
	                                   res.result.recordList[i].beforeDinnerRecord.recordPhoto.split(",");
	                        		}
	                        		if (res.result.recordList[i].afterDinnerRecord&&res.result.recordList[i].afterDinnerRecord.recordPhoto) {
	                                res.result.recordList[i].afterDinnerRecord.recordPhoto =
	                                    res.result.recordList[i].afterDinnerRecord.recordPhoto.split(",");
	                            }
	                            if(res.result.recordList[i].beforeSleepRecord&&res.result.recordList[i].beforeSleepRecord.recordPhoto){
	                        			res.result.recordList[i].beforeSleepRecord.recordPhoto =
	                                    res.result.recordList[i].beforeSleepRecord.recordPhoto.split(",");
	                        		}
	                        		if (res.result.recordList[i].earlyMorningRecord&&res.result.recordList[i].earlyMorningRecord.recordPhoto) {
	                                res.result.recordList[i].earlyMorningRecord.recordPhoto =
	                                    res.result.recordList[i].earlyMorningRecord.recordPhoto.split(",");
	                            }
	                            if (res.result.recordList[i].randomTimeRecord&&res.result.recordList[i].randomTimeRecord.recordPhoto) {
	                                res.result.recordList[i].randomTimeRecord.recordPhoto =
	                                    res.result.recordList[i].randomTimeRecord.recordPhoto.split(",");
	                            }


	                        }
	                        this.list = res.result.recordList;
	                        console.log('血糖',this.list,res.result.recordList)

	                    } else {
		                    	this.recordnothing = 2
		                    	this.paginationShow = false
                        		this.totalPage = res.result.totalPage;
	                        	this.list = []
	                    }
                    }
                    if (res.code === 510) {
                        this.$message.warning(res.message)
                    }
                    this.recordDataLoading = false;
                })
            },
			pageChange(){
				this.handleGetRecords(this.selected.recordPeriod);
			},
            handleGetStatistics (period) {
            		if(period !== this.selected.statisticsPeriod) {
					this.selected.statisticsPeriod = period;
				}
                this.statisticsDataLoading = true;
                getAction(spliceUrlWechat(this.url.getStatistics), { period: period, patientId: this.pid,type:3 }).then((res) => {
                    res = res.data
                    if (res.success) {
                        console.log("getstatistics:", res)
                    		this.count = [];
						this.avgValue = [];
						this.highCounts = [];
						this.lowCounts = [];
						this.normalCounts = [];
						this.highestValue = [];
						this.lowestValue = [];
						if(res.result.statistics != undefined) {
							for(let i = 0; i < res.result.statistics.length; i++) {
								this.count.push(res.result.statistics[i].count);
								this.avgValue.push(res.result.statistics[i].avgValue);
								this.highCounts.push(res.result.statistics[i].highCounts);
								this.lowCounts.push(res.result.statistics[i].lowCounts);
								this.normalCounts.push(res.result.statistics[i].normalCounts);
								this.highestValue.push(res.result.statistics[i].highestValue);
								this.lowestValue.push(res.result.statistics[i].lowestValue);
							}
							this.allcount = sum(this.count);
							this.allnormalCounts = sum(this.normalCounts);
							this.allhighCounts = sum(this.highCounts);
							this.alllowCounts = sum(this.lowCounts);
							this.allavgValue = avg(remove(this.avgValue));
							this.allhighestValue = remove(this.highestValue).sort(function(a,b){return b-a;})[0];
							this.alllowestValue = remove(this.lowestValue).sort(function(a,b){return a-b;})[0];

						}else{
							this.allcount = '-'
							this.allnormalCounts = '-'
							this.allhighCounts = '-'
							this.alllowCounts = '-'
							this.allavgValue = '-'
							this.allhighestValue = '-'
							this.alllowestValue = '-'
						}
                    }
                    if (res.code === 510) {
                        this.$message.warning(res.message)
                    }
                    this.statisticsDataLoading = false;
                })
            },
            onClickLeft() {
		    		window.location.href='../dailyIndex.html?userid='+this.pid
		    },
		    onClickRight() {
		    		window.location.href='../index.html?userid='+this.pid
		    },
			getSugarImg() {
				postAction(spliceUrlWechat('/record/common/sugar/photo/info'), {
					patientId: this.pid
				}).then(res => {
					res = res.data
					console.log("=======", res)
					if (res.success) {
						if(res.result && res.result.recordPhoto) {
							let images = res.result.recordPhoto.split(',')
							this.firstSugarImg = images[0]
							this.sugarImgs = images
						} else {
							this.firstSugarImg = ''
							this.sugarImgs = []
						}
					}
				})
			}
        },
        created() {
        		if(url('?userid')){
        			this.pid = url('?userid')
        		}else{
        			this.pid = localStorage.pid
        		}
        		this.init()
				this.getSugarImg()
        },
    });

    app.use(vant);


    app.use(vant.Lazyload);
	app.use(vant.ImagePreview);
	app.use(vant.Badge);


    app.mount('#app');
</script>

</html>
